<html>
    <head>
        <meta charset="utf-8">
        <title>蚂蚁课堂-登录/注册</title>
        <link rel="shortcut icon" href="/static/imgages/favicon.ico" type="image/x-icon">

        <!-- import Vue before Element -->
        <script src="../js/vue.min.js?sign=b7d8ff6efac1beba8e2027f97065e8fc&t=6538d28c"></script>

        <link rel="stylesheet" type="text/css"
              href="../css/iconfont.css?sign=f5f3aeb8a5a239b9bfcd9bab73ff91e9&t=6538d28c">
        <link rel="stylesheet" type="text/css"
              href="../css/new_file.css?sign=7d7625f47f32487c5490aade03a9f670&t=6538d28c">
        <link rel="stylesheet" type="text/css" href="../css/index.css?sign=2a1e49e6af97b1b3c7f202c524c9b5c5&t=6538d28c">
        <link rel="stylesheet" type="text/css"
              href="../css/bind-QQ.css?sign=ac1ca182fc50d468fde6cfa59549ef09&t=6538d28c">
        <script src="../js/jquery-1.11.1.min.js?sign=5d3399c2f4c92dff2d5af71a8cf184e6&t=6538d28c"></script>
        <script src="../js/public-bombs.js?sign=3447542e3c278e661b688e7e5ef0050a&t=6538d28c" type="text/javascript"
                charset="utf-8"></script>
        <script src="../js/bind-QQ.js?sign=755c4c14018e71c7d2cdf39a61e51c7b&t=6538d28c" type="text/javascript"
                charset="utf-8"></script>


    </head>
    <body style="background-color: #cccccc">
        <div id="app">

            <div style="padding-bottom: 298px;">
                <div class="bind-qq">

                    <div>
                        <div class="header-load-concent header-load-concent-1 clearfix"
                             style="height: auto; display: block;">
                            <h1 style="text-align: center">
                                <span class="load-span" style="margin-left: 0">登录/注册/绑定已有账户</span>
                            </h1>


                            <!-- 登录 -->
                            <div class="header-load-concent-in">


                                <div v-show="loginPhone" class="header-loading"
                                     onkeydown="keyLogin();">
                                    <div class="zhuce-first">

                                        <div class="header-loading-input header-zhuce-input1">
                                            <input class="zhece-email zhuce-public clear-empty" type="text"
                                                   id="u-email-reg" value="" v-model="userName" placeholder="用户名称"
                                                   autocomplete="off/">
                                        </div>
                                        <div class="header-loading-input header-zhuce-input1">
                                            <input class="zhece-email zhuce-public clear-empty" type="text"
                                                   value="" v-model="password" placeholder="用户密码"
                                                   autocomplete="off/">
                                        </div>
                                        <span class="num-phone right-email"
                                              style="height: 20px;display: block;"></span>

                                        <div class="header-loading-input header-zhuce-input6">
                                            <input class="zhece-idcode zhuce-public"
                                                   v-model="imgCaptcha"
                                                   type="text" id="regImageCode"
                                                   name="regImageCode" value="" placeholder="请输入验证码">
                                            <img style="width: 110px;height: 48px;float: right;margin-right: 5px"
                                                 :src="imgCaptchaUrl" @click="getNewImgCaptchaUrl()">
                                        </div>
                                        <span style="color: red; font-size: 13px; line-height: 30px;height: 30px;"
                                              v-show="imgCaptchaError">验证码输入有误!</span>
                                        <input id="registerOpenId" name="registerOpenId" class="registerOpenId"
                                               type="hidden" value="">

                                        <div id="registeErrorInfo"
                                             style="color: red; font-size: 13px; line-height: 30px;height: 30px; ">
                                            {{numberErrorStr}}
                                        </div>
                                        <button type="button" @click="login()">注册/关联</button>

                                    </div>
                                </div>
                                <!-- 注册部分 -->
                                <div class="header-zhuce" style="">

                                    <div class="main_zhuce" style="display: none">

                                    </div>
                                </div>
                                <div class="load-zhuce-footer">
                                    <br>
                                    <a href="#" class="logo-weixin"
                                       @click="phoneLogin()"
                                    ><span>手机验证码登录</span></a>
                                </div>
                            </div>


                        </div>

                    </div>

                </div>
            </div>
        </div>
        </div>
        </div>
        </div>


        <script src="../js/axios.min.js?sign=ad20f1d30703615d352f24ec60f67f71&t=6538d28c"></script>
        <script src="../js/cookie.min.js?sign=d92aa44d5026ab4dba328bf3746b2c44&t=6538d28c"></script>
        <script>
            new Vue({
                el: '#app',
                data() { // 绑定前端绑定数据
                    return {
                        wxMpQrCodeUrl: 'http://wmz644.mayikt.com/loadQrCode.png?sign=46d76eb59e2778b7278ea83d3d37454f&t=6538d28c',
                        registerToken: '',
                        timer: null,
                        timerSms: null,
                        scanQrCode: true,
                        countdownMsg: "发送短信",
                        countdownCount: 60,
                        loginPhone: true,
                        imgCaptchaError: false,
                        phoneError: false,
                        smsCodeError: false,
                        respErrorStr: '',
                        respError: false,
                        phone: "",
                        imgCaptcha: "",
                        smsCaptcha: '',
                        imgCaptchaUrl: 'http://127.0.0.1:9098/captcha',
                        numberErrorStr: "手机短信绑定，若手机号码未注册，我们将为您自动注册",
                        userName: "",
                        password: ""
                    }
                }, created() { // 创建方法

                },
                methods: {
                    mayikt() { // 定义方法

                    },
                    getNewImgCaptchaUrl() {
                        this.imgCaptchaUrl = this.imgCaptchaUrl + "?" + Math.random();
                    },
                    login() {
                        alert(this.userName + "," + this.password);
                        // 发送ajax请求
                        var _this = this;
                        _this.numberErrorStr = "";
                        if (_this.userName == '') {
                            alert("用户名称不允许为空");
                            return;
                        }
                        if (_this.imgCaptcha == '') {
                            alert("图形验证码不允许为空");
                            return;
                        }

                        var registerAssociationData = {
                            userName: _this.userName,
                            password: _this.password,
                            imgCaptcha: _this.imgCaptcha,
                        }

                        axios({
                            method: "POST",
                            url: "http://127.0.0.1:9098/login",
                            data: registerAssociationData,
                            withCredentials: true,
                            headers: {
                                'Content-Type': 'application/json;charset=UTF-8'
                            }
                        }).then(resp => {
                            var respCode = resp.data.code;
                            if (respCode != 200) {
                                _this.getNewImgCaptchaUrl();
                                _this.numberErrorStr = resp.data.msg;
                                return;
                            }
                            // 登录成功 获取token
                            var userToken = resp.data.data.userToken;
                            alert("用户登录成功:" + userToken);
                        });
                    }
                },
                beforeDestroy() {

                }, getLoginVerify() {

                },
                mounted() {
                    // 初始化方法
                }
            });
        </script>


    </body>
</html>